<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 面向对象编程是一种非常流行的编程范式（programming paradigm），
        // 所谓编程范式就是程序设计的方法论，
        // 简单的说就是程序员对程序的认知和理解以及他们编写代码的方式。


        // alert('hello world')  一条指令 
 
        // 循环 嵌套循环    多条指令 


        // 函数   (把独立而且重复使用的代码放到函数中 ) 需要的时候调用
        // 不想函数过于臃肿  一个函数可以拆分成多个 降低系统的复杂性 

        // 上面 是我们的人的思维 迁就 机器的思维去写代码   面向过程 

        // 函数是对多个指令的封装 

        // 如何用人的思维去写代码  => 面向对象  

        // 面向对象是对函数的封装  



        //面向过程 (关注的是过程)

        // 吃面条 
        //  1. 和面 : 多少面 多少水 
        //  2. 切面 : 切的宽细  (大宽 二宽 细 毛细)
        //  3. 煮面 : 煮时长 
        //  4. 准备卤: 什么卤 咸淡 
        //  5. 吃面 : 用什么吃 

        // 面向对象  (注重的是结果)
        //  找个面馆 没有面馆自己开一个 
        //  点一碗面 
        //  吃面 

        //  面向对象是对面向过程的高度封装  


        // 轮播图 


        // 面向过程 
        // 第一个轮播图
        // 1.获取元素 
        // 2.复制元素 函数
        // 3.设置焦点 函数
        // 4.自动轮播 + 轮播结束以后做的事情  函数
        // 5.移入移出  函数
        // 6. 点击事件  函数 

        //第二个轮播图 
         // 1.获取元素 
        // 2.复制元素 函数
        // 3.设置焦点 函数
        // 4.自动轮播 + 轮播结束以后做的事情  函数
        // 5.移入移出  函数
        // 6. 点击事件  函数 
        // 第三个轮播图 
         // 1.获取元素 
        // 2.复制元素 函数
        // 3.设置焦点 函数
        // 4.自动轮播 + 轮播结束以后做的事情  函数
        // 5.移入移出  函数
        // 6. 点击事件  函数 


        // 面向对象 
        // 找一个"机器" 会做上面6件事情 
        // 没有机器 就造一个机器  



        // 第一个轮播图 
        // 用这个机器 
        // 第二个轮播图 
        // 用这个机器 
        // 第三个轮播图 
        // 用这个机器 



        // 如何得到这个机器? 
        // 类和对象 
        // 人类  每个人
        // 轿车  鲁A88888
        // 面馆  齐鲁师范学院历下校区牛肉面馆 

        // 第一个轮播图 
        /* b1 = {
            box:xxx,
            ulbox:xxx,
            olbox:xxx,
            setpoint:function(){},
            autoplay:function(){},
            overout:function(){},
            bindevent:function(){},
            changePage:function(){}
        } */

         // 第二个轮播图 
        /* b2 = {
            box:xxx,
            ulbox:xxx,
            olbox:xxx,
            setpoint:function(){},
            autoplay:function(){},
            overout:function(){},
            bindevent:function(){},
            changePage:function(){}
        } */


        // 第三个轮播图 
        /* b3 = {
            box:xxx,
            ulbox:xxx,
            olbox:xxx,
            setpoint:function(){},
            autoplay:function(){},
            overout:function(){},
            bindevent:function(){},
            changePage:function(){}
        } */

        // 如何批量得到 b1 b2 b3 
        // 需要写一个机器  能够批量造对象 


        // 今日目标?
        // 如何批量生产对象?
        // 对象有属性 方法  

    </script>
</body>
</html>